<template>
    <div class="index-seller">
      <header style="background-color: #24b1f5;height:70px;text-align: center">
        <router-link to="home">
          <div style="text-align: left; line-height: 20px; font-size: 20px; font-weight: bolder; ">
            <el-icon><ArrowLeftBold /></el-icon>
            <span style="color: white; line-height: 20px; font-size: 20px; font-weight: bolder; ">返回首页</span>
          </div>
        </router-link>
            <h3 class="title">推荐家常菜</h3></header>
        <div v-for="(item,index) in homecook">
            <el-row :gutter="20"  class="shop-item" @click="toMerchant(index)">
                <el-col :span="3" ><img :src="item.image" class="image"/></el-col>
                <el-col :span="10">
                    <div class="main">
                        <section class="line-wrapper">
                            <h3 class="shopname" >
                                <span>{{item.shopName}}</span>
                            </h3>
                        </section>

                        <section class="line-wrapper">
                            <div>
                                <span class="split">月售{{item.monthlyNum}}单</span>
                            </div>
                            <div class="moneylimit">
                                <span class="split">￥{{item.dropOffFee}}起送 </span>
                            </div>
                        </section>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="timedistanceWrap">
                        <span>￥{{item.personAmount}}/人</span><br>
                        <span>电话:{{item.shopTelephone}}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
    import {ref,onMounted} from 'vue'
    import {allHomecook} from "../api/shop";
    import state from "../store";
    import {getMonthlyNum, getPersonAmount} from "../api/order";
    import {useRouter} from "vue-router";
    import {ArrowLeftBold} from "@element-plus/icons-vue";
    const router = useRouter()
    const homecook=ref([])
    onMounted(()=>{
        allHomecook().then((res)=>{
            homecook.value=res.data
            for(let i=0;i<res.data.length;i++){
                getPersonAmount({id:homecook.value[i].id}).then(res=>{
                    homecook.value[i].personAmount=res.data;
                })
                getMonthlyNum({id:homecook.value[i].id}).then(res=>{
                    homecook.value[i].monthlyNum=res.data;
                })
            }
        })
    })
    //跳转到merchantHome
    const toMerchant=(id)=>{
        state.commit("saveMerchantId",homecook.value[id].id)
        router.push({path:'/merchanthome'})
    }
</script>

<style scoped>
    .index-seller {
        background-color: rgba(176, 224, 230, 0.2);
        border-radius: 50px;
    }
    .index-seller .title{
        line-height: 1rem;
        padding-top: 0;
        padding-left: 0;
        font-weight: 800;
        font-size: 1.5rem;
        text-align: center;
    }
    .index-seller .loading-wrapper, .noMore-wrapper{
        text-align: center;
        color: #555;
        line-height: 1.066667rem;
    }
    .main {
        flex-grow: 1;
        padding: .4rem .266667rem .4rem 0;
    }

    .main .line-wrapper:not(:first-child) {
        margin-top: 0.2rem;
    }

    .main .line-wrapper {
        font-size: .493333rem;
        color: #666;
    }

    .main .line-wrapper .shopname {
        max-width: 5rem;
        font-weight: 700;
        font-size: 1rem;
    }


    .main .line-wrapper .supportWrap .supper i {
        display: inline-block;
        line-height: 1;
        margin-left: .066667rem;
        color: rgb(153, 153, 153);
        border: 0.013333rem solid rgb(221, 221, 221);
        font-size: .266667rem;
    }

    .main .line-wrapper .deliveryWrap span:not(:last-child) {
        margin-right: .08rem;
    }

    .main .line-wrapper .moneylimit {}

    .timedistanceWrap {
        top:5px;
        font-size: .493333rem;
        color: #999;
    }
    .shop-item{
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        background-color: rgba(176, 224, 230, 0.3);
        border: 1px solid rgba(0, 191, 255, 0.3);
    }


</style>